<style type="text/css">
    .side-left {
        width: 650px;
        display: inline-block;
        vertical-align: top;
        padding-right: 1em;
        margin-bottom: 1em;
    }

    .side-right {
        width: 230px;
        display: inline-block;
        vertical-align: top;
        padding-left: 1em;
    }

    .side-right .title {
    }

</style>
<div class="side-left">
    <?php
    switch ($page) {
        case "berita" :
            $this->view("kegiatan/berita");
            break;
        case "video" :
            $this->view("kegiatan/video");
            break;
        case "rekap" :
            $this->view("kegiatan/rekap");
            break;
        case "detailkegiatan" :
            $this->view("kegiatan/detailkegiatan");
            break;
        case "detailberita" :
            $this->view("kegiatan/detailberita");
            break;
    }
    ?>
</div>
<div class="side-right">
    <?php if (in_array($page, Array("video", "berita", "rekap"))) { ?>
        <style type="text/css">

            .agendaps {
                margin-top: 1em;
                width: 100%;
            }

            .kegiatan-kalender {
                height: 225px;
                display: inline-block;
                width: 100%;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                border: 1px solid #d4ccb0;
                background-color: #fbfaf3;
            }

            .kegiatan-kalender .ui-datepicker {
                margin: 1em auto;
            }

            .kegiatan-bulan {
                min-height: 195px;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                border: 1px solid #d4ccb0;
                border-top: none;
                background-color: #fbfaf3;
                padding: 1em;
                overflow: hidden;
            }
        </style>
        <h1 class="title">Agenda PS</h1>        
        <div class="agendaps">
            <div class="kegiatan-kalender"></div>
            <div class="kegiatan-bulan">
                <h2 class="bulan" style="margin-top: 0.35em; margin-bottom: 1.25em;">Januari 2014 :</h2>
                <div class="bulan-list">
                    <ul>
                        <li>asd</li>
                    </ul>
                </div>
            </div>
        </div>
    <?php } ?>

    <?php if (in_array($page, Array("berita", "rekap"))) { ?>
        <style type="text/css">
            .video {
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                border: 1px solid #d4ccb0;
                background-color: #fbfaf3;
                padding: 1em;
            }

            #ls-thumbnail img {
                width: 200px;
                margin: 0.5em auto;
                border-top: 1.5em solid black;
                border-bottom: 1.5em solid black;
            }
        </style>
        <h1 class="title" style="margin-bottom: 0.3em;">Live Report</h1>
        <div class="video">
            <a id="ls-thumbnail">
                <img src="http://thumbnail.api.livestream.com/thumbnail?name=chan" />
            </a>
            <script language="JavaScript" type="text/javascript">
                function updateThumb() {
                    $("#ls-thumbnail img").prop("src", "http://thumbnail.api.livestream.com/thumbnail?name=chan&t="
                            + new Date().valueOf());
                }
                jQuery(document).ready(function() {
                    setInterval("updateThumb()", 10000);
                    updateThumb();
                    $("#ls-thumbnail").prop("href", "javascript:goToLS();");
                });
                function goToLS() {
                    if (is_mobile) {
                        window.location = "http://xperdesaansehatx.api.channel.livestream.com/3.0/playlist.m3u8";
                    } else {
                        window.location = "<?php echo site_url("kegiatan/video"); ?>";
                    }
                }
            </script>
        </div>
    <?php } ?>

    <?php if (in_array($page, Array("detailberita", "detailkegiatan"))) { ?>
        <div class="beritakeg">
            <div class="title">Berita Kegiatan</div>
        </div>
        <div>
            <ul style="list-style-type: none; padding: 0; margin-top: 0.2em;">
                <li>    
                    <?php echo $kegiatan->content_id->title; ?> :
                    <?php
                    echo "<ul style=\"list-style-type: circle; padding: 0;\">";
                    if (count($beritaList) > 0) {
                        foreach ($beritaList as $kb) {
                            if (($page == "detailberita") && ($kb->id == $berita->id)) {
                                echo "<li>" . $kb->content_id->title . "</li>";
                            } else {
                                echo "<li>" . "<a href='" . site_url("kegiatan/detail/" . $kegiatan->id . "/" . $kb->id) . "'>" . $kb->content_id->title . "</a>" . "</li>";
                            }
                        }
                        echo "</ul>";
                    } else {
                        echo "( tidak ada berita )";
                    }
                    ?>
                </li>
            </ul>
        </div>

    <?php } ?>

</div>
<script type="text/javascript">
<?php echo "var kegByDates = " . json_encode($kegByDates) . ";" ?>
<?php echo "var kegByMonths = " . json_encode($kegByMonths) . ";" ?>
<?php echo "var kegArr = " . json_encode($kegArr) . ";" ?>
    jQuery(document).ready(function() {
        $(".kegiatan-kalender").datepicker({
            changeMonth: true,
            changeYear: true,
            beforeShowDay: function(date) {
                var dateStr = date.yyyymmdd();
                if (kegByDates[dateStr]) {
                    var title = "";
                    for (var i = 0; i < kegByDates[dateStr].length; i++) {
                        if (i > 0) {
                            title += "\n";
                        }
                        title += "- " + kegByDates[dateStr][i];
                    }
                    return [true, '', title];
                } else {
                    return [false, '', ''];
                }
            },
            onChangeMonthYear: function(year, month, inst) {
                updateKalenderList(month - 1, year);
            }
        });
        var d = new Date();
        updateKalenderList(d.getMonth(), d.getFullYear());
    });

    function updateKalenderList(month, year) {
        // update title
        $(".kegiatan-bulan .bulan").text($(".kegiatan-kalender").datepicker("option", "monthNames")[month] + " " + year + " :");
        // update list
        $(".kegiatan-bulan .bulan-list ul").html("");
        var isExist = false;
        if (kegByMonths[year + "-" + ((month + 1 < 10) ? "0" : "") + (month + 1)]) {
            var mArr = kegByMonths[year + "-" + ((month + 1 < 10) ? "0" : "") + (month + 1)];
            for (var i = 0; i < mArr.length; i++) {
                $(".kegiatan-bulan .bulan-list ul").append("<li>" + "<a href='" + kegArr["" + mArr[i]]["href"] + "'>" + kegArr["" + mArr[i]]["title"] + "</a>" + "</li>");
                isExist = true;
            }
        }
        if (!isExist) {
            $(".kegiatan-bulan .bulan-list ul").append("<li>" + "(tidak ada jadwal kegiatan)" + "</li>");
        }
    }
</script>